<template>
	<span :class="[`dot`, `dot-${props.type}`]">
		<span :class="`dot-${props.type}`"></span>
	</span>
</template>

<script lang="ts" setup name="smart-dot">
const props = defineProps({
	type: {
		type: String,
		required: false,
		default: 'error',
	},
})

</script>

<style lang="less" scoped>
@-webkit-keyframes dot-animation {
	0% {
		opacity: 0.6;
		transform: scale(0.8);
	}
	to {
		opacity: 0;
		transform: scale(2.4);
	}
}

@keyframes dot-animation {
	0% {
		opacity: 0.6;
		transform: scale(0.8);
	}
	to {
		opacity: 0;
		transform: scale(2.4);
	}
}

.dot {
	position: relative;
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 3px;
	margin-right: 3px;
	vertical-align: middle;
	border-radius: 50%;

	span {
		position: relative;
		top: 0;
		left: 0;
		box-sizing: border-box;
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		-webkit-animation: dot-animation 1.2s ease-in-out infinite;
		animation: dot-animation 1.2s ease-in-out infinite;
	}
}

.dot-default {
	background-color: @primary-6;
}

.dot-warning {
	background-color: @warning-6;
}


.dot-danger {
	background-color: @danger-6;
}

.dot-success {
	background-color: @success-6;
}
</style>
